<template>
  <div>
    <div class="header-fixed">
      <Header :text="text"/>
    </div>
    <div class="content">
      <!--
      <el-button plain class="btn" @click="handle"><van-icon name="scan" style="font-size: 20px" /><span style="margin-left:5px">{{$t('btn.scan')}}</span></el-button>
      -->
      <el-button plain class="btn" @click="handleHand"><i class="el-icon-edit"></i><span>{{$t('btn.handleEntry')}}</span></el-button>
    </div>
    <!-- 手动输入 -->
    <van-dialog v-if="show" v-model="show" :title="`${$t('m.please')+$t('cTransportSearch.applicationBatch')}`" :beforeClose="handleConfirm" show-cancel-button>
      <el-input :placeholder="`${$t('m.please')+$t('cTransportSearch.applicationBatch')}`" style="padding:10px" v-model="shipmentInput"/>
    </van-dialog>
    <sign-detail v-if="isShow"
                 :signObj="signObj"
                 @handleCancel="handleCancel"
    >
    </sign-detail>
  </div>
</template>

<script>
import Header from '../../../components/common/Header'
import signDetail from './components/signDetail'
import { $landSign } from '../../../api/transport'
import { Notify } from 'vant'
export default {
  components: {
    Header,
    signDetail
  },
  data(){
    return {
      text: '',
      show: false,
      shipmentInput: '',
      isShow: false,
      signObj: {}
    }
  },
  methods: {
    handleHand() {
      this.show = true
    },
    handleConfirm(action, done) {
      if (action === 'confirm') {
        if (this.shipmentInput === '') {
          done()
          this.show = false
          this.shipmentInput = ''
          return Notify(this.$t('message.applicationBatch'))
        }
        else {
          const obj = {
            applyBatch: this.shipmentInput
          }
          this.getDetail(obj,done)
        }
      } else {
        done()
      }
      this.shipmentInput = ''
    },
    getDetail(obj, done) {
      $landSign
          .getLandInfo(obj)
          .then(res => {
            if (res.status !== 200) return this.$msg.fail(res.msg)
            if (res.data === null) return this.$msg.fail('查询申请批次号为空')
            this.signObj = res.data
            this.isShow = true
          })
          .catch(err => this.$msg.fail(err))
          .finally(() => {
            done()
          })
    },
    handleCancel() {
      this.isShow = false
    }
  },
  created() {
    this.text = this.$t(this.$route.query.type)
  }
}
</script>

<style scoped>
.content {
  position: fixed;
  display: flex;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
/deep/.el-button span{
  display: flex;
  justify-content: center;
  align-items: center;
}
/deep/.el-button {
  margin: 10px 0;
}
/deep/.el-input {
  box-sizing: border-box;
}
</style>
